<template>
	<view class="stepRow">
		<image
			class="all_stepIcon"
			src="../static/images/jindu1.png"
			v-if="!planeStatus"
			@click="handleChekcPlan"
			mode=""
		></image>
		<image
			class="all_stepIcon"
			src="../static/images/jindu2.png"
			v-if="planeStatus"
			@click="handleChekcPlan"
			mode=""
		></image>
		<view class="finnaceStep" v-if="planeStatus">
			<view class="btn_line">
				<view class="btn_process" @click="checkProcess()">
					查看流程
				</view>
				<view class="btn_process" style="margin-left: 150rpx;background-color: #40A0F2;" @click="adjustPopShow()">
					调整流程
				</view>
			</view>
			
			
			<scroll-view scroll-y="true" style="max-height: 600rpx;">
				<view class="MyStep" v-for="(item, index) in stepList">
					<view class="stepLine" v-if="!(index == stepList.length - 1)"></view>
					<view class="stepRow1">
						<image class="stepIdot" src="../static/images/icon_jd1@2x.png" mode=""></image>
						<text v-if="item.approval_status == '0'" class="stepdate">{{item.add_time}}</text>
						<text v-else class="stepdate">{{item.update_time}}</text>
						<text class="stepdate" style="margin-left: 30rpx;">{{ item.memberInfo.nickname + ' 提交' }}</text>
					</view>
					<view class="stepRow2">
						<text
							v-if="item.approval_status == '0'"
							class="stepusername"
							style="margin-right: 10rpx;"
							v-for="items in item.tomemberInfo"
						>{{items.nickname}}</text>
				
						<text v-if="item.approval_status != '0'" class="stepusername">{{ item.executorInfo.nickname }}</text>
						<!-- <text class="stepstatus">审批中</text> -->
						<text style="color:#19af3c;font-size: 24rpx;" v-if="item.approval_status == '0'">
							待审批
						</text>
						<text style="color:rgb(14, 163, 232);font-size: 24rpx;" v-if="item.approval_status == '1'">
							通过
						</text>
						<text style="color:rgb(245, 95, 95);font-size: 24rpx;" v-if="item.approval_status == '-1'">
							驳回
						</text>
					</view>
					<view class="" style="margin-left: 40rpx; color: #999999;" v-show="item.remark != null && item.remark != 'undefined'">
						{{item.remark}}
					</view>
				</view>
			</scroll-view>
			
		</view>
		
		<!-- 项目阶段调整展示弹窗 -->
		<uni-popup class="uniPopC" ref="adjust_pop" type="dialog" :mask-click="true">
			<view class="closeIcon" @click="adjustPopClose()">
				<image style="width:52rpx;height: 52rpx;" src="../static/images/Close_icon@2x.png"></image>
			</view>
			<view class="noticDetails" style="font-size: 28rpx;">
				<view class="adjust_pop_line">
					选择调整项目阶段:
				</view>
				<view class="adjust_stage" v-for="item in adjust_list" @click="tabAdjustStage(item)">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
		<!-- 项目阶段调整展示弹窗结束 -->
		
	</view>
</template>

<script>
export default {
	name: 'project-button',
	data() {
		return {
			planeStatus: false,
			stepList: [
				{
					tomemberInfo:[
						{
							nickname:''
						}
					],
					executorInfo:{
						nickname:''
					},
					memberInfo:{
						nickname:''
					}
				}
			],
			stepProcessList:{
				stage_code:'',
				project_id:''
			},
			adjust_list:[],
		};
	},
	props: ['approvalLog','processList'],
	created() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		// console.log('文件上传组件的merid',this.member_id)
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		
	},
	methods: {
		// 获得可调整阶段
		async getStage(){
			console.log('stepProcessList.project_id---' +　this.stepProcessList.project_id)
			const res = await this.$myRequest({
				url: 'Project/adjust_list',
				method: 'GET',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					project_id: this.stepProcessList.project_id
				}
			});
				if (res.data.code != 200)
					return uni.showToast({
						title: res.data.datas.msg,
						icon: 'none'
					});
					this.adjust_list = res.data.datas.list;
		},
		// 选择调整项目阶段
		tabAdjustStage(item) {
			uni.showModal({
				title: '提示',
				content: '确定调整阶段吗?',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定');
						this.adjustNode(item);
						
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
		// 发送请求调整阶段 Project/adjust_node
		async adjustNode(item){
			const res = await this.$myRequest({
				url: 'Project/adjust_node',
				method: 'GET',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					project_id: this.stepProcessList.project_id,
					stage_code:item.code
				}
			});
			if (res.data.code != 200)
				return uni.showToast({
					title: res.data.datas.msg,
					icon: 'none'
				});
				
			this.$refs.adjust_pop.close();
			uni.showToast({
				title: res.data.datas.msg,
				icon: 'none'
			});
			setTimeout(
				(res)=>{
					uni.navigateBack({
						delta:1
					})
				},1500
			)
			
		},
		adjustPopClose() {
			this.$refs.adjust_pop.close();
		},
		// 点击调整流程
		adjustPopShow(){
			this.getStage();
			this.$refs.adjust_pop.open();
		},
		// 点击查看进度
		handleChekcPlan() {
			this.planeStatus = !this.planeStatus;
		},
		// 查看项目流程
		checkProcess(){
			
			console.log('stage_code-------' + this.stepProcessList.stage_code)
			uni.navigateTo({
				url: '/packageProject/pages/project/projectProcess?stage_code=' + this.stepProcessList.stage_code + '&project_id=' +　this.stepProcessList.project_id
			})
		}
	},
	mounted() {
		console.log('进度组件-mounted', this.approvalLog);
		if (this.approvalLog) {
			this.stepList = this.approvalLog;
		}
		if(this.processList){
			this.stepProcessList = this.processList;
			
		}
	},
	watch: {
		approvalLog(val, oldVal) {
			if (val) {
				this.stepList = val;
				console.log('进度组件-watch', this.stepList);
			}
		},
		processList(val){
			if (val) {
				this.stepProcessList = val;
				
				console.log('进度组件-watch', this.stepProcessList);
			}
		}
	}
};
</script>

<style scoped lang="scss">
	.noticDetails {
		background-color: #fff;
		width: 630rpx;
		max-height: 925rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		position: relative;
		overflow: hidden;
	}
	
	.adjust_stage {
		text-align: center;
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #DD524D;
	}
	
	.adjust_pop_line {
		margin-bottom: 20rpx;
	}
	
	.adjust_pop_line_right {
		margin-left: 8rpx;
		color: #40A0F2;
	}
// 弹窗
	.uniPopC {
		position: relative;

		.closeIcon {
			position: absolute;
			top: -70rpx;
			right: 0;
		}
	}	
	
.btn_line{
	display: flex;
	flex-direction: row;
	
}	
	
.btn_process{
	width: 170rpx;
	height: 50rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	border-radius: 10rpx;
	text-align: center;
	line-height: 50rpx;
	margin-bottom: 20rpx;
	background-color: #f4a029;
}	
	
.stepRow {
	position: relative;
	display: flex;
	justify-content: flex-end;

	.stepIcon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
	}

	.finnaceStep {
		position: absolute;
		top: 70rpx;
		right: 30rpx;
		width: 630rpx;
		background: #ffffff;
		z-index: 99;
		box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		padding: 48rpx 30rpx;
		border-radius: 20px;

		.MyStep {
			position: relative;

			.stepLine {
				position: absolute;
				width: 2px;
				height: 100%;
				left: 12rpx;
				top: 22rpx;
				background-color: #40a0f2;
			}

			.stepRow1 {
				display: flex;
				align-items: center;

				.stepIdot {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.stepdate {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #128bf1;
				}
			}

			.stepRow2 {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.stepusername {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.stepusername:nth-child(1){
					margin-left: 70rpx;
				}

				.stepstatus {
					margin: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #19af3c;
				}
			}
		}
	}
}
</style>
